<script setup lang="ts">
import { computed, ref } from 'vue'
import { ArrowDown, QuestionFilled } from '@element-plus/icons-vue'

export interface CartItemData {
  id: string
  title: string
  image: string
  price: number
  originalPrice?: number
  quantity: number
  checked: boolean
}

const props = defineProps<{
  selectedItems: CartItemData[]
  selectedCount: number
}>()

const emits = defineEmits<{
  (e: 'checkout'): void
}>()

// 计算属性
const totalProductPrice = computed(() => {
  return props.selectedItems.reduce((total, item) => {
    return total + (item.originalPrice || item.price) * item.quantity
  }, 0)
})

const totalDiscount = computed(() => {
  return props.selectedItems.reduce((total, item) => {
    const originalPrice = item.originalPrice || item.price
    return total + (originalPrice - item.price) * item.quantity
  }, 0)
})

const storeDiscount = computed(() => {
  // 模拟店铺优惠，这里可以根据实际业务逻辑计算
  return Math.min(totalDiscount.value * 0.25, 7)
})

const officialDiscount = computed(() => {
  // 模拟官方立减，这里可以根据实际业务逻辑计算
  return Math.min(totalDiscount.value * 0.57, 16)
})

const redPacketDiscount = computed(() => {
  // 模拟红包优惠，这里可以根据实际业务逻辑计算
  return Math.min(totalDiscount.value * 0.18, 5)
})

const finalTotal = computed(() => {
  return totalProductPrice.value - totalDiscount.value
})

// 是否显示优惠详情
const showDiscountDetails = ref(false)

const handleCheckout = () => {
  if (props.selectedCount === 0) {
    return
  }
  
  emits('checkout')
}

const toggleDiscountDetails = () => {
  showDiscountDetails.value = !showDiscountDetails.value
}
</script>

<template>
  <div class="cart-summary">
    <!-- 结算区域 -->
    <div class="summary-main">
      <div class="summary-left">
        <div class="selected-info">
          已选商品 <span class="selected-count">{{ selectedCount }}</span> 件
        </div>
        <div class="total-info">
          <div class="total-price">
            合计: <span class="price-amount">¥{{ finalTotal.toFixed(2) }}</span>
          </div>
          <div class="discount-info" @click="toggleDiscountDetails">
            <span class="discount-text">共节省: <span class="discount-amount">¥{{ totalDiscount.toFixed(2) }}</span></span>
            <el-icon class="discount-icon" :class="{ 'is-active': showDiscountDetails }"><ArrowDown /></el-icon>
          </div>
        </div>
      </div>
      <div class="summary-right">
        <button 
          class="checkout-btn"
          :disabled="selectedCount === 0"
          @click="handleCheckout"
        >
          结 算
        </button>
      </div>
    </div>
    
    <!-- 优惠详情 -->
    <div class="discount-details" v-show="showDiscountDetails">
      <div class="details-header">
        <div class="details-title">优惠明细</div>
        <div class="details-note">实际优惠金额以下单页为准</div>
      </div>
      
      <div class="details-list">
        <!-- 店铺优惠 -->
        <div class="discount-item">
          <div class="discount-label">
            <span class="discount-tag store-discount">店铺</span>
            <span class="discount-name">店铺优惠</span>
          </div>
          <div class="discount-value">-¥{{ storeDiscount.toFixed(2) }}</div>
        </div>
        
        <!-- 官方立减 -->
        <div class="discount-item">
          <div class="discount-label">
            <span class="discount-tag official-discount">官方</span>
            <span class="discount-name">官方立减</span>
            <el-icon class="help-icon"><QuestionFilled /></el-icon>
          </div>
          <div class="discount-value">-¥{{ officialDiscount.toFixed(2) }}</div>
        </div>
        
        <!-- 红包优惠 -->
        <div class="discount-item">
          <div class="discount-label">
            <span class="discount-tag red-packet">红包</span>
            <span class="discount-name">红包优惠</span>
          </div>
          <div class="discount-value">-¥{{ redPacketDiscount.toFixed(2) }}</div>
        </div>
      </div>
      
      <!-- 商品缩略图 -->
      <div class="product-thumbnails">
        <div 
          v-for="item in selectedItems" 
          :key="item.id"
          class="thumbnail-item"
          :title="item.title"
        >
          <img :src="item.image" :alt="item.title" class="thumbnail-img" />
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.cart-summary {
  background: #fff;
  border: 1px solid #f0f0f0;
  position: sticky;
  bottom: 0;
  z-index: 10;
}

.summary-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
}

.summary-left {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  
  .selected-info {
    font-size: 0.875rem;
    color: #666;
    
    .selected-count {
      color: #ff6a00; // 改为 #ff6a00
      font-weight: 500;
    }
  }
  
  .total-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    
    .total-price {
      font-size: 0.875rem;
      color: #333;
      font-weight: 500;
      
      .price-amount {
        font-size: 1.25rem;
        font-weight: 700;
        color: #ff6a00; // 改为 #ff6a00
      }
    }
    
    .discount-info {
      display: flex;
      align-items: center;
      gap: 0.25rem;
      cursor: pointer;
      transition: all 0.3s ease;
      
      .discount-text {
        font-size: 0.75rem;
        color: #999;
        
        .discount-amount {
          color: #ff6a00; // 改为 #ff6a00
        }
      }
      
      .discount-icon {
        font-size: 0.75rem;
        color: #999;
        transition: transform 0.3s ease;
        
        &.is-active {
          transform: rotate(180deg);
        }
      }
      
      &:hover {
        transform: translateY(-2px);
        
        .discount-text {
          color: #ff6a00; // 改为 #ff6a00
        }
        
        .discount-icon {
          color: #ff6a00; // 改为 #ff6a00
        }
      }
    }
  }
}

.summary-right {
  .checkout-btn {
    width: 7.5rem;
    height: 2.25rem;
    background: #ff6a00; // 改为 #ff6a00
    border: none;
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 0.25rem;
    
    &:hover:not(:disabled) {
      background: #ff8c00;
      transform: translateY(-1px);
      box-shadow: 0 2px 5px rgba(255, 106, 0, 0.3);
    }
    
    &:active:not(:disabled) {
      background: #e67e00;
      transform: translateY(0);
    }
    
    &:disabled {
      background: #ccc;
      cursor: not-allowed;
    }
  }
}

.discount-details {
  padding: 1rem;
  background: #f8f8f8;
  border-top: 1px dashed #e0e0e0;
}

.details-header {
  margin-bottom: 1rem;
  
  .details-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: #333;
    margin-bottom: 0.25rem;
  }
  
  .details-note {
    font-size: 0.75rem;
    color: #999;
  }
}

.details-list {
  margin-bottom: 1rem;
  
  .discount-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    
    &:not(:last-child) {
      border-bottom: 1px dashed #f0f0f0;
    }
    
    .discount-label {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      
      .discount-tag {
        display: inline-block;
        padding: 0 0.25rem;
        font-size: 0.7rem;
        color: #fff;
        border-radius: 2px;
        
        &.store-discount {
          background-color: #ff6a00; // 改为 #ff6a00
        }
        
        &.official-discount {
          background-color: #ff6a00; // 改为 #ff6a00
        }
        
        &.red-packet {
          background-color: #ff6a00; // 改为 #ff6a00
        }
      }
      
      .discount-name {
        font-size: 0.875rem;
        color: #333;
      }
      
      .help-icon {
        font-size: 0.7rem;
        color: #999;
        cursor: pointer;
        transition: all 0.3s ease;
        
        &:hover {
          color: #ff6a00; // 改为 #ff6a00
          transform: scale(1.1);
        }
      }
    }
    
    .discount-value {
      font-size: 0.8125rem;
      color: #ff6a00; // 改为 #ff6a00
      font-weight: 500;
    }
  }
}

.product-thumbnails {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  
  .thumbnail-item {
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid #eee;
    overflow: hidden;
    background: #fff;
    
    &:hover {
      border-color: #ff6a00; // 改为 #ff6a00
    }
    
    .thumbnail-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .summary-main {
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .summary-left {
    width: 100%;
  }
  
  .summary-right {
    width: 100%;
    
    .checkout-btn {
      width: 100%;
    }
  }
  
  .discount-details {
    padding: 0.75rem;
  }
  
  .product-thumbnails {
    justify-content: center;
    
    .thumbnail-item {
      width: 2.5rem;
      height: 2.5rem;
    }
  }
}
</style>


